<template>
  <div class="box">
    <header>
      <div class="top">
        <i @click="back" class="iconfont icon-fangxiang1"></i><span>药店搜索</span>
      </div>
      <van-search
  v-model="text"
  placeholder="请输入搜索关键词"
  show-action
  shape="round"
  @search="search"
>
  <div slot="action" @click="search">搜索</div>
</van-search>
    </header>
    <div class="content">
      <Sousuo :list="searchlist" />
    </div>
  </div>
</template>
<script>
import Sousuo from '@/components/Search.vue'
import Vue from 'vue'
import { getSearch } from '@/utils/api'
import { Search } from 'vant'
Vue.use(Search)
export default {
  components: {
    Sousuo
  },
  data () {
    return {
      searchlist: [],
      text: '胶囊'
    }
  },
  mounted () {
    getSearch(this.text).then(res => {
      this.searchlist = res.data.data
    })
  },
  methods: {
    back () {
      this.$router.back()
    },
    search () {
      // console.log('11111')
      getSearch(this.text).then(res => {
        // console.log(res)
        this.searchlist = res.data.data
      })
    }
  }
}
</script>
s
<style lang="scss" scoped>
@import '@/lib/reset.scss';
 header{
  background: none;
  overflow: auto;
  .top{
    height: 40px;
     background: #36bc7c;
     display: flex;
     align-items: center;
     color: #fff;
     span{
       @include flex(2);
       text-align: left;
       text-indent: 15px;
     }
     i{
       @include flex(1);
       text-align: left;
       text-indent: 10px;
     }
  }
}
</style>
